<template>
	<div class="index">
		<el-row :gutter="30">
			<el-col class="index-head" :span="24">
				<el-col :lg="18" :xl="20">
					<div class="index-head-left">学员分期数据补录</div>
				</el-col>
			</el-col>
		</el-row>
		<el-row :gutter="30">
			<el-col :lg="18" :xl="20" class="my-artcle">
				<div class="student-select">
					<p class="student-select-title">学员查询</p>
					<el-input placeholder="输入学员证件号码" v-model="search" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="searchStu">查询</el-button>
					</el-input>
				</div>
				<div class="pay-method">
					<div class="pay-method-con">
						<el-form labelPosition="right" label-width="180px" ref="form" :model="form" :rules="rules" class="quane-pay">
							<el-form-item label="支付方式：">
								<el-radio-group v-model="form.paymentMethod">
									<el-radio label="3">现金</el-radio>
									<el-radio label="4">刷卡</el-radio>
									<el-radio label="1">支付宝</el-radio>
									<el-radio label="2">微信</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="总金额：" prop="totalAmount">
								<el-input class="pay-method-ipt total padding-right" v-model="form.totalAmount" :maxlength="5"></el-input>
							</el-form-item>
							<el-form-item label="分期数目：" prop="instalment">
								<el-select class="pay-method-ipt" v-model="form.instalment" placeholder="请选择分期数目...">
									<el-option label="2期" :value="2"></el-option>
									<el-option label="3期" :value="3"></el-option>
									<el-option label="4期" :value="4"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="本期金额：" prop="amount">
								<el-input class="pay-method-ipt total" v-model="form.amount" :maxlength="5"></el-input>
							</el-form-item>
							<el-form-item label="招生业务员：">
								<el-select class="pay-method-ipt" v-model="form.clerkBh" placeholder="请选择招生业务员...">
									<el-option v-for="item in employees" :key="item.ebh" :label="item.ename+'['+item.idCard+']'" :value="item.ebh">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="备注：" prop="remark">
								<el-input type="textarea" class="pay-method-ipt" v-model="form.remark"></el-input>
							</el-form-item>
							<input type="button" class="submit-btn" @click="submitForm" value="提   交">
						</el-form>
					</div>
				</div>
			</el-col>
			<el-col :lg="6" :xl="4">
				<student-info :stuData="stuData"></student-info>
			</el-col>
		</el-row>
		<!-- 信息确认 -->
		<confirm v-model="confirmShow" title="加时费信息确认" @onSubmit="onSubmit">
			<submit-item label="姓名" :value="stuData.name"></submit-item>
			<submit-item label="支付方式" :value="form.paymentMethod=='1'?'支付宝':form.paymentMethod=='2'?'微信':form.paymentMethod=='3'?'现金':form.paymentMethod=='4'?'刷卡':'未知'"></submit-item>
			<submit-item label="性别" :value="$dicCache.getNameByMarkAndVal('XBDM', stuData.sex)"></submit-item>
			<submit-item label="总金额" :value="form.totalAmount"></submit-item>
			<submit-item label="证件号码" :value="stuData.cardnum"></submit-item>
			<submit-item label="培训车型" :value="stuData.traintype"></submit-item>
			<submit-item label="手机号码" :value="stuData.phone"></submit-item>
			<submit-item label="本期金额" :value="Number(form.amount||0)"></submit-item>
			<submit-item label="付费类型" :value="'分期付款[共' + form.instalment +'期]'"></submit-item>
			<submit-item label="招生业务员" :value="form.clerkName"></submit-item>
			<submit-item label="备注" :value="form.remark"></submit-item>
		</confirm>
	</div>
</template>
<script>
	import studentInfo from "@/components/student-info";
	import confirm from "@/components/income-submit";
	import submitItem from "@/components/submit-item";

	export default {
		name: "",
		components: {
			studentInfo,
			confirm,
			submitItem
		},
		mounted() {
			// 员工业务员
			this.$http.get('iem/allEmployee', (d) => {
				if(d.resultCode == 0) {
					this.employees = d.record;
				}
			});
		},
		data() {
			return {
				search: '',
				stuData: {},
				employees: [],
				confirmShow: false,
				form: {
					paymentMethod: '3',
					totalAmount: '',
					instalment: '',
					amount: '',
					clerkBh: '',
					clerkName: '',
					remark: '',
					instalmentNo: 1
				},
				rules: {
					totalAmount: [{
							required: true,
							message: "请输入总金额！",
							trigger: "blur"
						},
						{
							max: 5,
							message: "最大长度 5 个字符",
							trigger: "blur"
						}
					],
					instalment: [{
						required: true,
						message: "请选择分期数目！",
						trigger: "blur"
					}],
					amount: [{
							required: true,
							message: "请输入总金额！",
							trigger: "blur"
						},
						{
							max: 5,
							message: "最大长度 5 个字符",
							trigger: "blur"
						}
					],
					remark: [{
						max: 200,
						message: "最大长度 200 个字符",
						trigger: "blur"
					}]
				},
			};
		},
		watch: {
			'form.clerkBh': function(val, old) {
				let _emp = this.employees.filter((e) => {
					return e.ebh == val;
				});

				if(_emp.length > 0) {
					this.form.clerkName = _emp[0].ename + '[' + _emp[0].idCard + ']';
				} else {
					this.form.clerkName = '';
				}
			}
		},
		methods: {
			searchStu() {
				if(this.search != "") {
					this.$http.get("iem/stupayment/" + this.search, {
						_t: Math.random()
					}, n => {
						if(n.status == '1') {
							if(n.data.obj) { //有报名信息
								layer.msg('该学员报名信息已存在！', {
									shift: 6,
									shade: 0.3
								});
							} else {
								this.$http.get(process.env.JXH_API_HOST + "api/student/" + this.search, {
									_t: Math.random()
								}, (d) => {
									if(d.resultCode == 0) {
										this.stuData = d.record;
									} else {
										layer.msg(d.msg, {
											shift: 6,
											shade: 0.3
										});
										this.stuData = {};
									}
								});
							}
						} else {
							layer.msg(n.msg, {
								shift: 6,
								shade: 0.3
							});
						}
					});

				}
			},
			submitForm() {
				if(this.stuData.studentId) {
					this.$refs.form.validate(valid => {
						if(!valid) {
							return false;
						}
						this.confirmShow = true;
					});
				} else {
					layer.msg('请先查询学员信息！', {
						shift: 6,
						shade: 0.3
					});
				}
			},
			onSubmit() {
				this.$http.post("iem/lsstupayment", {
					stuBh: this.stuData.studentId,
					stuName: this.stuData.name,
					idCard: this.stuData.cardnum,
					traintype: this.stuData.traintype,
					payType: '2',
					totalAmount: this.totalAmount,
					instalment: this.instalment,
					amount: this.amount,
					subject: '',
					clerkBh: this.clerkBh,
					instalmentNo: 1,
					remark: this.remark
				}, function(d) {
					if(d.status == '1') {
						top.location.reload();
					} else {
						layer.msg(d.msg, {
							shift: 6
						});
					}
				});
			}
		}
	}
</script>
<style>

</style>